<%--
  Created by IntelliJ IDEA.
  User: landeqing
  Date: 2018/1/29
  Time: 13:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/jquery/jquery-3.2.1.min.js"></script>
<html>
<head>
    <title>购物车列表</title>
    <script type="text/javascript">
        function removeProduct(id) {
            var uid = '${sessionScope.user.id}';
            alert("确定移除吗?");
            window.location.href = "/shoppingCart/delete?uid=" + uid + "&id=" + id;

        }

        //加的效果
        function addPrice(price, id) {
            var count = $("#count_" + id).val();
            $("#count_" + id).val(parseInt(count) + 1);
            var subtotal = (parseInt(count) + 1) * price;
            $("#subtotal_" + id).html(subtotal);
            totalPrice();
        }

        //减的效果
        function jianPrice(price, id) {
            //alert(price);
            var count = $("#count_" + id).val();
            if (parseInt(count) - 1 != 0) {
                $("#count_" + id).val(parseInt(count) - 1);
                var subtotal = (parseInt(count) - 1) * price;
                $("#subtotal_" + id).html(subtotal);
            }
            totalPrice();
        }

        function totalPrice() {
            var totalPrice = 0;
            $('input[name="box_id"]:checked').each(function () {
                var id = $(this).val();
                var price = $(".productPrice_" + id).val();
                var count = $("#count_" + id).val();
                totalPrice += (price * count);
            });
            $("#totalPriceId").html(totalPrice);
        }

        $(document).ready(function () {
            totalPrice();
        });

        function toJieSuan() {
            var chk_value = [];
            var id = "";
            var count = "";
            var cartId = "";
            $('input[name="box_id"]:checked').each(function () {
//                id += chk_value.push($(this).val()) + ",";
                id+=$(".productId_"+$(this).val()).val()+",";
                count += $("#count_" + $(this).val()).val() + ",";
                cartId += $("#cartId_" + $(this).val()).val() + ",";
            });
            var totalPrice = $("#totalPriceId").html();

            var uid = '${sessionScope.user.id}';
            if(totalPrice!=null&&totalPrice!=0){

            window.location.href = "/order/toSubmitOrder?id=" + id + "&count=" + count + "&totalPrice=" + totalPrice + "&cartId=" + cartId+"&uid="+uid;
        }
            else {
                alert("购物车是空的，不能结算！");
                return false;

            }
        }
    </script>
    <style type="text/css">
        .gw_num {
            border: 1px solid #dbdbdb;
            width: 100px;
            line-height: 26px;
            overflow: hidden;
        }

        .gw_num em {
            display: block;
            height: 15px;
            width: 16px;
            float: left;
            color: #7A7979;
            border-right: 1px solid #dbdbdb;
            text-align: center;
            cursor: pointer;
        }

        .gw_num .num {
            display: block;
            float: left;
            text-align: center;
            width: 60px;
            font-style: normal;
            font-size: 14px;
            line-height: 24px;
            border: 0;
        }

        .gw_num em.add {
            float: right;
            border-right: 0;
            border-left: 1px solid #dbdbdb;
        }
    </style>
</head>
<body>
<form>
    <table border="1" align="center">
        <tr>
            <td>全选</td>
            <td>商品</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>操作</td>
        </tr>
        <c:forEach items="${voList}" var="obj">
            <tr>
                <input type="hidden" name="productId" class="productId_${obj.product_id}" value="${obj.product_id}">
                <input type="hidden" name="cartId" value="${obj.id}" id="cartId_${obj.product_id}">
                <td><input type="checkbox" name="box_id" value="${obj.product_id}" checked="checked"
                           onclick="totalPrice()"></td>
                <td><input style="border: 0px;" name="product_name" value="${obj.productName}" readonly="readonly"></td>
                <td><input style="border: 0px;" name="product_price" value="${obj.price}" readonly="readonly"
                           class="productPrice_${obj.product_id}"></td>
                <td style="width:120px;">
                    <div class="gw_num">
                        <em class="jian" onclick="jianPrice(${obj.price},${obj.product_id})">-</em>
                        <input type="text" value="${obj.product_count}" id="count_${obj.product_id}" class="num"
                               name="count"/>
                        <em class="add" onclick="addPrice(${obj.price},${obj.product_id})">+</em>
                    </div>
                </td>
                <td><span id="subtotal_${obj.product_id}">${obj.price*obj.product_count}</span></td>
                <td><input type="button" value="移除" onclick="removeProduct(${obj.id})"></td>
            </tr>
        </c:forEach>
    </table>
    <table align="center">
        <tr>
            <td>总价格：<span id="totalPriceId"></span></td>
            <td><input type="button" value="去结算" onclick="toJieSuan()"></td>
        </tr>

    </table>
</form>
</body>
</html>
